<template>
	<view class="user">
		<!--顶部个人信息栏-->
		<view class="header">
			<view class="user-info">
				<view class="info">
					<view v-if="!avatar" class="avatar avatar-bg" @click="handleToLogin">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<u-image v-else @click="handleToAvatar" :src="avatar" width="100px" height="100px"
						radius="30px"></u-image>
				</view>

				<view class="name">用户名：{{ user.nickName }}</view>

				<view class="right-icons">
					<view class="user-opt" style="margin-right: 30rpx" @click="handleToInfo">
						<image style="width: 80rpx; height: 80rpx" src="/static/images/icon_user_info.svg"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="content-section">
			<view class="menu-list">
				<view class="menu-title">
					<view class="large-text">我的功能</view>
				</view>
				<view class="nav">
					<view v-for="(item, index) in menuList" :key="index" class="menu-item" @tap="tapMenu(item)">
						<view class="icon-wrapper">
							<view :class="[item.icon]" class="iconfont menu-icon"></view>
						</view>
						<text class="menu-text">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="content-section-next">
				<view class="menu-list">
					<view class="list-cell">
						<view class="menu-item-box">
							<u-icon name="phone" color="#ff5500" size="20"></u-icon>
							<view style="padding-left: 10px;">手机号码 ：{{user.phonenumber}}</view>
						</view>
					</view>
					<view class="list-cell">
						<view class="menu-item-box">
							<u-icon name="email" color="#ff5500" size="20"></u-icon>
							<view style="padding-left: 10px;">电子邮箱 ：{{user.email}}</view>
						</view>
					</view>
					<view class="list-cell">
						<view class="menu-item-box">
							<u-icon name="calendar" color="#ff5500" size="20"></u-icon>
							<view style="padding-left: 10px;">创建日期 ： {{user.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom-button">
				<u-button text="解除绑定" type="error" @click="handleLogout"></u-button>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getUserProfile
	} from '../../api/system/user'
	import {
		UnBinding
	} from '../../api/login.js'
	const MENULIST = [{
			id: 1,
			name: "编辑资料",
			image: "/static/images/icon_my_collection.png",
			method: 'handleToEditInfo',
			link: "/pages/mine/info/edit",
			icon: 'icon-user'
		},
		{
			id: 2,
			name: "修改密码",
			image: "/static/images/icon_my_service.png",
			method: 'handleToSetting',
			link: "/pages/mine/pwd/index",
			icon: 'icon-setting'
		},
		{
			id: 3,
			name: "关于我们",
			image: "/static/images/icon_my_history.png",
			method: 'handleAbout',
			link: "/pages/mine/about/index",
			icon: 'icon-aixin'
		},
		{
			id: 4,
			name: "常见问题",
			image: "/static/images/icon_my_invite.png",
			method: 'handleToHelp',
			link: "/pages/mine/help/index",
			icon: 'icon-help'
		},
	]

	export default {
		data() {
			return {
				user: {},
				name: this.$store.state.user.name,
				navBg: 0,
				menuList: MENULIST
			}
		},

		computed: {
			avatar() {
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			},
		},

		onPageScroll(e) {
			const top = uni.upx2px(100)
			const {
				scrollTop
			} = e
			let percent = scrollTop / top > 1 ? 1 : scrollTop / top
			this.navBg = percent
		},
		onLoad() {
			uni.$on('updateUserSuccess', () => {
				this.getUser()
			})
			this.getUser()
		},
		onUnload() {
			uni.$off('updateUserSuccess') // 页面卸载时移除监听
		},
		methods: {
			getUser() {
				getUserProfile().then(response => {
					this.user = response.data
				})
			},
			// 菜单点击处理
			tapMenu(item) {
				this[item.method]()
			},

			// 页面跳转相关方法
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/pwd/index')
			},
			handleToHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},

			// 功能性方法
			getMessage() {
				uni.showToast({
					title: '功能正在开发',
					icon: 'none'
				});
			},
			// handleLogout() {
			// 	this.$modal.confirm('确定解绑并退出系统吗？').then(() => {
			// 		//或者解除绑定
			// 		const openId =  uni.getStorageSync('openId');
			// 		console.log("获取到的OpenID",openId)
			// 		UnBinding(openId).then( res =>{
			// 			// 清除本地存储的登录信息
			// 			uni.removeStorageSync('token');
			// 			uni.removeStorageSync('openId');
			// 			//this.$tab.reLaunch('/pages/login');
			// 		    // H5 端清除地址栏参数
			// 		   //  if (process.env.VUE_APP_PLATFORM === 'h5') {
			// 			  // history.replaceState(history.state, '', location.pathname);
			// 		   //  }
			// 			location.href = "https://hy-dev-wx.henanhanyong.cn/binding.html?customerType=0";
			// 		})
			// 	})
			// },
			handleLogout() {
			this.$modal.confirm('确定解绑并退出系统吗？').then(() => {
				const openId = uni.getStorageSync('openId');
				console.log("获取到的OpenID", openId);
		
				if (!openId) {
					this.$modal.msgError('未找到 OpenID，无法解绑');
					return;
				}
		
				// 调用解绑接口
				UnBinding(openId)
					.then(res => {
						// ✅ 只有解绑成功才继续
						if (res && res.code === 200) { // 假设后端返回 code: 200 表示成功
							uni.removeStorageSync('token');
							uni.removeStorageSync('openId');
							this.$modal.msgSuccess('解绑成功');
		
							// 跳转到绑定页
							location.href = "https://hy-dev-wx.henanhanyong.cn/binding.html?customerType=0";
						} else {
							this.$modal.msgError(res.msg || '解绑失败');
						}
					})
					.catch(err => {
						// 捕获错误，避免 Uncaught
						console.error('解绑请求失败:', err);
						this.$modal.msgError('网络错误或服务器异常，解绑失败');
					});
			}).catch(() => {
				// 用户取消
				console.log('用户取消解绑');
			});
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://henanhanyong1995.oss-cn-hangzhou.aliyuncs.com/WeChatUploadImg/login_bg.jpg') no-repeat center center;
		background-size: cover;
		background-repeat: no-repeat;
		background-size: 100% 100%; // 修改为100%宽度和高度
		background-attachment: fixed; // 固定背景不随内容滚动
		position: relative;
	}

	.user {

		// height: 100vh;
		// background: linear-gradient(180deg, hsla(358, 85%, 68%, 1) 0%, hsla(41, 98%, 49%, 1) 100%);
		// 顶部用户信息区域
		.header {
			background-size: cover;
			background-repeat: no-repeat;
			height: 380rpx;

			.user-info {
				text-align: center;

				.info {
					padding-top: 20px;
					display: flex;
					justify-content: center;

					.avatar {
						height: 110rpx;
						width: 110rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 20rpx;
						flex: none;

						&-bg {
							background-color: #ffffff;
							color: #666666;
							text-align: center;
							line-height: 110rpx;

							.icon-people {
								font-size: 60rpx;
							}
						}
					}
				}

				.name {
					padding-top: 10px;
					font-size: 36rpx;
				}
			}
		}

		// 菜单列表区域
		.menu-list {
			background: #fff;
			border-radius: 12rpx;
			margin: 20rpx;
			padding: 20rpx;
			position: relative;
			top: -100rpx;

			.menu-title {
				border-bottom: 1px dashed #e5e5e5;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #333;
			}

			.nav {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 30rpx;
				padding: 20rpx 0;
			}

			.menu-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon-wrapper {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					background: #FFF4E8;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 16rpx;
				}

				.menu-icon {
					font-size: 40rpx;
					color: #FF9B44;
				}

				.menu-text {
					font-size: 24rpx;
					color: #333;
				}
			}
		}

		.bottom-button {
			padding: 10px;
		}

		// 通用样式
		.black-text {
			color: #333333;
			display: flex;
			align-items: center;
		}

		.small-text {
			font-size: 24rpx;
		}

		.margin-top-10 {
			margin-top: 10rpx;
		}
	}
</style>